<template>
  <div class="charge-system">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">主营全面打开</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList" style="margin-bottom:12px">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" :area_name.sync="areaName" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="form.acctMonth" value-format="yyyyMM" type="month"
                          placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" style="margin-left: 12px" @click="queryHandle()">查询</el-button>
          <!-- <el-button size="small" type="orange" @click="handle_export()">导出</el-button> -->
        </el-form-item>
      </el-form>
      <!-- <div class="table--top">
        <p class="g-unit">单位: 万元</p>
      </div> -->
      <div class="tableBox">
        <el-table border stripe v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" :header-cell-style="headerStyle"
                  :span-method="spanMethod" height="78vh" ref="table">
          <el-table-column v-for="(it, i) in columns" :key="i" :prop="it.prop" :label="it.label"
                           :min-width="it.minWidth">
          </el-table-column>
        </el-table>
        <!-- <div class="page-wrapper" v-if="tableData.length">
          <span class="totalNum">共{{ totalNum }}条</span>
          <el-pagination layout="prev, pager, sizes, next" :page-sizes="[10, 20, 50]" @size-change="sizeChange"
                         :page-size="pageSize" :total="totalNum" :current-page.sync="currentPage"
                         @current-change="handleCurrentChange"></el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import { getMonthDays, getWeek } from "@/utils/common";
import prefixAPI from "@/api/prefixAPI";
import { months } from "moment";
import { downLoadExcelParams } from "@/utils/zipdownload.js";
export default {
    name: "Bill-tab1",
    components: {
        NoticeBar: () => import("@/components/NoticeBar")
    },
    data() {
        let nowYear = new Date().getFullYear();
        let nowMonth = new Date().getMonth() + 1;
        let month = nowMonth > 9 ? nowYear + "" + nowMonth : nowYear + "0" + nowMonth;
        return {
            areaName: "",
            titleName: [],

            form: {
                areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
                acctMonth: "202303"
                // acctMonth: month
            },
            tableData: [],
            colList: [],
            titles: [],
            colnumName: [],
            // page: 1,
            pageSize: 50,
            currentPage: 1,
            // dataTotal: 0,
            totalNum: 0,
            dataSourceNameList: [],
            verticalIndexNameList: [],
            CcustFlgTypeOptions: [],

            noticeText: "",

            tableLoading: false,
            columns: []

            // class1
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;

            this.getTable();
        },
        //页码改变
        sizeChange(val) {
            this.pageSize = val;
            this.submitHandle();
        },
        //翻页操作
        handleCurrentChange(page) {
            this.currentPage = page;
            this.submitHandle();
        },

        async getTable() {
            try {
                this.tableLoading = true;
                let { code, content, message } = await this.fetch($budgetAPI.getMainIncomeAnalyzeList, {
                    ...this.form
                });

                this.tableData = content.data;
                this.columns = content.head.map((item) => {
                    return {
                        prop: item.data,
                        label: item.name,
                        minWidth: item.data == "indexName" ? "200" : "110",
                        algin: item.data == "indexName" ? "left" : "center"
                    };
                });
            } catch (error) {
            } finally {
                this.tableLoading = false;
            }
        },
        //查询
        queryHandle() {
            this.getTable();
        },
        headerStyle({ row, column, rowIndex, columnIndex }) {
            row[1].colSpan = 2; //第三列的表头占据3个单元格
            row[2].colSpan = 0;
            if (columnIndex === 0) {
                return "display: none";
            }
        },

        spanMethod({ row, column, rowIndex, columnIndex }) {
            if (column.property == "indexType") {
                // 根据需要更改列索引
                const prevRow = this.tableData[rowIndex - 1];
                console.log("prevRow: ", prevRow);
                if (prevRow && row.indexType === prevRow.indexType) {
                    return [0, 0]; // 当前单元格被合并，不显示
                }
                let rowspan = 1;
                while (this.tableData[rowIndex + rowspan] && row.indexType === this.tableData[rowIndex + rowspan].indexType) {
                    rowspan++;
                }
                return [rowspan, 1];
            }
        },

        handle_export() {
            const { areaName } = this;
            let areaId = this.form.areaId,
                acctMonth = this.form.month,
                isAfterTax = this.form.isAfterTax,
                isHb = this.form.isHb,
                token = getCookie("token"),
                custFlg = this.form.custFlg;
            let params = {
                areaId,
                acctMonth,
                isAfterTax,
                isHb
                // token
            };
            let fileName = `收入日帐-片区码号${isHb ? "环比" : ""} -${areaName} -${acctMonth} `;
            if (custFlg) params.custFlg = custFlg;
            downLoadExcelParams("/dailyOutAccountTwo/exportBatchByMH", params, fileName);
        }
    }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    padding: 15px 0;
    .totalNum {
        color: #999;
    }
}
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
        }
    }
}
.table--top {
    width: 100%;
    display: flex;
    align-items: center;
    /* margin: 20px 0; */
    /* .notice-bar {
        width: 550px;
    } */
    .g-unit {
        text-align: right;
        flex: 1;
        transform: translateY(10px);
    }
}
</style>
